<template>
  <div class="main">
    <div style="display: flex; justify-content: center">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/Shop">热门商店</el-menu-item>
        <el-menu-item index="/MyCollect">我的收藏</el-menu-item>
        <el-menu-item index="/ShoppingCart">购物车</el-menu-item>
        <el-menu-item index="/OrderCenter">订单中心</el-menu-item>
      </el-menu>
    </div>
    <br>
    <div>
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in shops" :key="item.id">
          <el-image :src="item.imageUrl"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-divider>热门店铺</el-divider>
    <div class="shop-list">
      <el-row :gutter="20">
        <el-col
            v-for="shop in shops"
            :key="shop.id"
            :span="6"
            @click.native="navigateToShop(shop.id,shop.status)"
        >
          <el-card class="shop-card" shadow="hover">
            <img :src="shop.imageUrl" alt="shop.name" class="shop-image"/>
            <div class="shop-info">
              <h3 class="shop-name">{{ shop.name }}</h3>
              <p class="shop-description">{{ shop.description || '暂无描述' }}</p>
              <p class="shop-status">
                <el-tag :type="shop.status === 1 ? 'success' : 'info'">
                  {{ shop.status === 1 ? '营业中' : '已打烊' }}
                </el-tag>
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {queryShopByPage} from "@/api/request/ShopRequest";

export default {
  name: "ShopView",
  data() {
    return {
      activeIndex: '/Shop',
      shops: []
    };
  },
  methods: {
    getShopList() {
      queryShopByPage().then(res => {
        this.shops = res.content
      })
    },
    handleSelect(key) {
      this.$router.push(key);
    },
    navigateToShop(shopId, status) {
      if (status !== 1) {
        this.$message.error('店铺已打烊')
        return
      }
      this.$router.push({
        path: '/ShopDetail',
        query: {
          id: shopId
        }
      });
    },
  },
  mounted() {
    this.getShopList()
  }
};
</script>


<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
<style scoped lang="scss">
.main {
  padding-top: 93px;
}

.shop-list {
  padding: 20px;
}

.shop-card {
  cursor: pointer;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }

  .shop-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
  }

  .shop-info {
    padding: 15px;

    .shop-name {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }

    .shop-description {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }

    .shop-status {
      text-align: right;
    }
  }
}
</style>
